/**
 * Created by Administrator on 2016/6/30 0030.
 */
import React from 'react';

var scope;
export default class PayType extends React.Component{
    constructor(props){
        super(props);
        scope = this;
    };

    handlePayType(i,payCode){
        scope.props.callbackPayType(i,payCode);
    };
    
    render(){
        return (
            <div className="pay-part">
                <div className="part-head">支付方式</div>
                <ul className="type-box pay-type-box">
                    {scope.payItem()}
                </ul>
            </div>
        );
    };

    payItem(){
        var data = scope.props.data;
        var payItems = '';
        if(data.pay_type && data.pay_type.length > 0){
            payItems = data.pay_type.map(function (p,i) {
                var index = scope.props.data.pay_type_index;
                var desc = 'coin' == p.payment_way ? scope.yueDesc(data.coin_amount) : scope.weChatDesc();
                var hot_icon = 'cash' == p.payment_way ? 'images/is_hot.png' : 'images/tuijian.png';
                var checkedClass = '';
                if(index == i){
                    checkedClass = 'checked-label';
                }
                if(data.coin_amount == 0 && 'coin' == p.payment_way){
                    return '';
                }else{
                   return (
                        scope.payLiCreate(p,i,checkedClass,hot_icon,desc)
                   )
                }
            })
        }
        return payItems;
    };
    payLiCreate(p,i,checkedClass,hot_icon,desc){
        return (
            <li key={p.payment_way + '_pay'}>
                <div className="check-group">
                    <label className={"check-radio " + checkedClass} data={p.payment_way}
                           onClick={scope.handlePayType.bind(this,i,p.payment_way)}></label>
                    <img className="pay-type-icon" src={p.pay_icon} alt={p.pay_name} />
                    <div className="pay-type-info">
                        <div className="pay-type-name-box">
                            <span className="pay-type-name">{p.pay_name}</span>
                            <img className="pay-type-hot" src={hot_icon} alt={p.pay_name} />
                        </div>
                        {desc}
                    </div>
                </div>
            </li>
        );
    };

    weChatDesc(){
        return (
            <div className="pay-type-desc">绿色支付，快乐生活</div>
        );
    };

    yueDesc(amount){
        return (
            <div className="pay-type-desc">当前余额：RMB <span className="left-amount">{amount}</span></div>
        );
    };
}